<script setup>
import MyEcharts from './components/my-echarts.vue';
import { ref, computed } from 'vue';

function getRandomData () {
  return [
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
  ];
}


const data = ref(getRandomData());

setInterval(() => {
  data.value = getRandomData();
}, 1000);

const option = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: data.value.map(d => d.day),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.value.map(d => d.value),
        type: 'line'
      }
    ],
  };
});

</script>

<template>
  <my-echarts :option="option" />
</template>

<style>
#app {
  height: 100vh;
  width: 100vw;
}
</style>
